﻿{% extends "layout.html" %}

{% block left %}
<div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar">
    <li class="active"><a href="/">OverView</a></li>
    <li><a href="/worldcloud">WordCloud</a></li>
    <li><a href="/realtime">RealTime</a></li>
    <li><a href="/contrast">Contrast</a></li>
    <li><a href="/multiy">MultiY</a></li>
    <li><a href="/sharedataset">ShareDataset</a></li>
  </ul>
</div>
{% endblock %}

{% block right %}
<!--右边展示-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  <h1 class="page-header">数据趋势图</h1>

  <div class="row placeholders">
        <!--展示区-->
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="col-xs-12 col-sm-8 col-lg-10 placeholder" style="height:500px;" id="main">

    </div>

  </div>
</div>
{% endblock %}

{% block echarts_js %}

<script type="text/javascript" >
         $(function (ec) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
                    title: {
                        text: '一周变化',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['正向数据','负向数据']
                    },
                    toolbox: {
                        show: true,
                        itemGap: 15,
                        showTitle: true,
                        feature: {

                            magicType: {
                                show:true,
                                title:{
                                    line:'切换为折线图',
                                    bar:'切换为柱状图',
                                    stack:'堆积',
                                    tiled:'平铺'
                                },
                                type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show:true, title:'重置'},
                            saveAsImage: {show:true, title:'保存为图片图'}
                        }
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一','周二','周三','周四','周五','周六','周日']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    series: [
                        {
                            name:'正向数据',
                            type:'line',
                            data:[],
                            barGap: 0,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'正1向数据',
                            type:'line',
                            data:[],
                            barGap: 0,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'正2向数据',
                            type:'line',
                            data:[],
                            barGap: 0,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'负向数据',
                            type:'line',
                            data:[],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                };
                myChart.showLoading(); // 加载动画
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "/get_date", //把表单数据发送到/weather
                    data: null, // 发送的数据
                    dataType : "json",  //返回数据形式为json
                    async: false,
                    error: function(request) {
                        alert("发送请求失败！");
                    },
                    success: function(result) {
                        //console.log(result);
                        for (i = 0, max = result.data[0].length; i < max; i++) { //注意：result.data.length
                            option.series[0].data.push(result.data[0][i]);
                            option.series[1].data.push(result.data[1][i]);
                            option.series[2].data.push(result.data[2][i]);
                            option.series[3].data.push(result.data[3][i]);
                        };

                        // 为echarts对象加载数据--------------
                        myChart.hideLoading(); // 隐藏加载动画
                        myChart.setOption(option);
                    }
                 });

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.onresize = myChart.resize;

                myChart.on('click', function(param){
                    var date_list = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
                    var name = param.name
                    if (date_list.indexOf(name) > -1){
                        window.location.href="/source_data/" + name;
                    }
                })

        });
</script>        
{% endblock %}